<template>
  <div class="login">
    <div class="login-bg"></div>

    <div class="login-content">
      <div class="login-title">登录</div>
      <div class="input-item">
        <el-input placeholder="请输入账号" v-model="form.account">
          <i slot="prefix" class="el-input__icon el-icon-user"></i>
        </el-input>
      </div>
      <div class="input-item">
        <el-input placeholder="请输入密码" v-model="form.password" type="password" @keydown.enter.native="login" show-password>
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
      </div>
      <div class="input-item text-right">
        <el-checkbox v-model="form.remeber">记住密码</el-checkbox>
      </div>
      <div class="input-item">
        <el-button type="primary" @click="login" style="width:100%;">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { setItem, getItem } from '../script/config/common'
import { service, purviewRepository } from '../script/api/get-data'
import { menuData } from '../models/fake-data'
export default {
  name: 'login',
  mounted() {
      
  },
  data() {
    return {
      form: {
        account: 'admin',
        password: '123456',
        remeber: '',
      },
      loginUrl: ''
    }
  },
  methods: {
    login() {
      if (!this.validation()) {
        return;
      }
      let param = {
        AccountName: this.form.account,
        AccountPassword: this.form.password,
      };

      if (param.AccountName === 'admin' && param.AccountPassword === '123456') {
        let _menuList = menuData || [];
        console.log("login ~ _menuList:", _menuList)
        setItem('navResource', _menuList);
        setItem('user', {
          AccountName: 'admin',
          SysUserId: '15',
        })
        this.loginUrl = '/home';
        this.loginSuccess(this.loginUrl);
      } else {
        this.loginFail('账号或者密码输入错误');
      }
    },

    loginSuccess(url) {
      // console.log('loginSuccess', url);
      setItem('loginUrl', this.loginUrl);
      this.$router.push(url);
    },

    loginFail(message) {
      this.$message.warning(message || '账号或者密码输入错误');
    },

    validation() {
      if (!this.form.account) {
        this.$message.warning('请输入账号');
        return false;
      }
      if (!this.form.password) {
        this.$message.warning('请输入密码');
        return false;
      }
      return true;
    },

    getNav(navResource) {
      for (const nav of (navResource || [])) {
        if (nav.PageUrl && !this.loginUrl) {
          this.loginUrl = nav.PageUrl;
        }
        if (nav.Childs && nav.Childs.length > 0) {
          this.getNav(nav.Childs)
        }
      }
    }

  }
}
</script>
<style lang="scss">
  .login {
    height: 100%;
    width: 100%;
    padding: 0;

    .login-bg {
      background-color: #409eff;
      width: 100%;
      height: 300px;
    }

    .login-content {
      width: 400px;
      min-height: 300px;
      padding: 0px 40px 20px;
      position: fixed;
      top: 45%;
      left: 50%;
      background: #ffffff;
      transform: translateX(-50%) translateY(-50%);
      box-shadow: 0 3px 10px #ccc;

      .login-title {
        font-size: 24px;
        margin: 20px 0;
      }

      .input-item {
        margin-bottom: 20px;
      }
    }
  }
</style>
